The image preview used CSS scale-150 to enlarge on click, which doesn't affect document layout flow — the scaled element rendered behind the puzzle tile grid.

Changes

• GameView.vue — Replace scale-150 toggle with a <Teleport to="body"> overlay:

  • Fixed-position, z-50 backdrop (bg-black/60 + backdrop-blur) renders above all game content
  • "Preview" glass-pill badge above the image makes context explicit
  • ✕ close button (accessible aria-label) + click-backdrop-to-close
  • Smooth fade + scale-down enter/leave via Vue <Transition> with scoped CSS
  • Thumbnail retains hover:scale-105 micro-interaction and tooltip

• i18n.config.ts — Add Preview and Close preview translation keys

<Teleport to="body">
  <Transition name="preview-overlay">
    <div v-if="enlargePreview" class="fixed inset-0 z-50 ..." @click.self="enlargePreview = false">
      <span aria-hidden="true">{{ $t("Preview") }}</span>
      <img :src="data.imgSrc" class="max-h-[80vh] max-w-[90vw] ..." />
      <button :aria-label="$t('Close preview')" @click="enlargePreview = false">✕</button>
    </div>
  </Transition>
</Teleport>

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.